<template>
  <div class="addMember">
    <el-dialog
      title="添加"
      :visible.sync="addMemberDialogVisible"
      width="60%"
      @open="getLeaderList()"
      @close="close()"
      :center="true"
      :before-close="addMemberCancel"
    >
      <el-card class="box-card">
        <el-form>
          <el-form-item>
            <el-input
              clearable
              placeholder="员工姓名"
              v-model="queryData.name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.providerName"
              clearable
              placeholder="人员来源"
            >
              <el-option label="本公司" value="本公司"></el-option>
              <el-option label="供应商" value="供应商"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handeleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <el-table
          v-loading="loading"
          :data="MemberList"
          ref="multipleTable"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelection"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" label="员工姓名" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" align="center">
          </el-table-column>
          <el-table-column prop="sex" align="center" label="性别" width="60px">
            <template slot-scope="scope">
              <div>{{ scope.row.sex == 0 ? "男" : "女" }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="age" align="center" label="年龄" width="60px">
          </el-table-column>
          <el-table-column prop="stationName" align="center" label="岗位">
          </el-table-column>
          <el-table-column prop="rank" align="center" label="级别" width="60px">
            <template slot-scope="scope">
              <div v-show="scope.row.rank == 0">初级</div>
              <div v-show="scope.row.rank == 1">中级</div>
              <div v-show="scope.row.rank == 2">高级</div>
            </template>
          </el-table-column>
          <el-table-column prop="yearsWorking" align="center" label="工作年限">
          </el-table-column>
          <el-table-column prop="providerName" align="center" label="人员来源">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          :page.sync="queryData.pageNum"
          :limit.sync="queryData.pageSize"
          @pagination="getLeaderList"
        />
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMemberCancel">取 消</el-button>
        <el-button type="primary" @click="addMember">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 导入接口文件
import { selectIsLeader } from "../../../../../api/item";

import Pagination from "../../../../../components/Pagination/index.vue";
export default {
  name: "AddMember",
  props: ["addMemberDialogVisible"],
  components: {
    Pagination,
  },
  data() {
    return {
      loading: true,
      region: "",
      MemberList: [],
      selectRows: [],
      select: [],
      selectTotal: 0,
      total: 0, //总条数
      queryData: {
        pageNum: 1, //当前显示多少数据
        pageSize: 8, // 当前页
        name: "", //员工名称
        providerName: "", //人员来源
      },
    };
  },
  methods: {
    // 获取未进入项目的员工数据
    getLeaderList() {
      selectIsLeader(this.queryData).then((res) => {
        this.loading = false;
        this.total = res.data.total; //总条数
        this.queryData.pageNum = res.data.current; //当前页
        this.queryData.pageSize = res.data.size; //每页显示条数
        this.MemberList = res.data.records;
      });
    },
    // 关闭弹窗时的回调
    close() {
      (this.queryData = {
        pageNum: 1,
        pageSize: 8,
        name: "",
        providerName: "",
        id: 0,
      }),
        this.getLeaderList();
      this.memberList = [];
    },
    // 当选择项发生变化时会触发该事件
    handleSelection(val) {
      this.selectRows = val;
    },
    // 取消新增按钮
    addMemberCancel() {
      this.select = [];
      this.$emit("addMemberCancel", false);
    },
    // 确认新增按钮
    addMember() {
      var list = this.selectRows;
      list.forEach((list) => {
        this.select.push({
          id: list.id,
          projectId: this.$store.state['item/mid'],
        });
      });
      this.$emit("addMember", this.select, false);
      this.select = [];
    },
    // 查询按钮
    handeleSearch() {
      this.getLeaderList();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 250px;
}
.el-form {
  display: flex;
  justify-content: space-evenly;
}
.el-card {
  margin: 20px;
}
</style>
